<script setup>
import {reactive,ref,getCurrentInstance} from 'vue'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const { proxy } = getCurrentInstance()
const { $t } = proxy;
locale.value = localStorage.getItem('lang') || 'zhCN'
let sortList = reactive([{ name: '全部' }, { name: '扭蛋分类' }, { name: '扭蛋分类' }, { name: '扭蛋分类' }, { name: '扭蛋分类' }, { name: '扭蛋分类' }, { name: '更多' }])
const emit = defineEmits('clickSortFunc','viewMoreClick')
// 鼠标点击分类
const clickSortFunc = (index) => {
    // sortIndex.value = index
    emit('clickSortFunc',index)
}
const props = defineProps(['sortList','isDark','sortIndex'])
let flexWrap = ref(false)
console.log(props.sortList,'sortList')
</script>
<template>
   
    <div class="sortBoxBig">
        <div class="sortBox" :style="{flexWrap:flexWrap?'wrap': 'unset'}">
            <div v-for="(item, index) in props.sortList" :key="index"  :class="props.sortIndex === index ? 'sortAll' : 'sortItem'"
                @click="clickSortFunc(index)">
                {{ item.name }}
                <!-- <img style="margin-left: 9px;width: 14.69px;" v-if="index === (props.sortList.length - 1)"
                    src="../../assets/img/home/jiantou.png" alt=""> -->
            </div>
            <div class="viewmoer" @click="flexWrap = true,emit('viewMoreClick',flexWrap)" v-show="!flexWrap">{{$t('msg.message.viewMore')}}</div>
            <div class="viewmoer" @click="flexWrap = false,emit('viewMoreClick',flexWrap)" v-show="flexWrap" style="position: unset;">{{$t('msg.message.putitAway')}}</div>
        </div>
        
    </div>
  
</template>
<style scoped>
.sortBoxBig{
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    /* overflow-x: auto; */
    overflow: hidden;
    font-size: 24px;
    /* min-width: 1400px; */
    position: relative;
}
.sortBox {
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    /* overflow-x: auto; */
    /* overflow: hidden; */
    margin: 0 194px;
    font-size: 24px;
    width: 82%;
    position: relative;

}
.viewmoer{
    position: absolute;
    cursor: pointer;
    right: 77px;
    top: 0;
    display: flex;
    align-items: center;
    padding: 21px 36px;
    justify-content: center;
    /* margin-right: 28px; */
    color: #000;
    margin-bottom: 24px;
    margin-top: 20px;
    z-index: 10;
    /* min-width: 100px; */
    background: linear-gradient(143.13deg, #27D698 23.41%, #5BCE3A 85.53%);
}
.sortAll {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 21px 36px;
    justify-content: center;
    margin-right: 28px;
    color: #000;
    margin-bottom: 24px;
    margin-top: 20px;
    /* min-width: 100px; */
    background: linear-gradient(143.13deg, #27D698 23.41%, #5BCE3A 85.53%);

}

.sortItem {
    /* min-width: 100px; */
    cursor: pointer;
    /* background-color: transparent; */
    color: #fff;
    /* border-radius: 8px; */
    /* border: 1px solid #CFCFCF; */
    display: flex;
    align-items: center;
    padding: 21px 36px;
    justify-content: center;
    margin-right: 28px;
    margin-bottom: 24px;
    margin-top: 20px;
    background: #282828;
}
@media (min-width: 2560px){
    .viewmoer{
        right: 433px;
    }
}
@media (min-width: 2400px) and (max-width: 2559px){
    .viewmoer{
        right: 302px;
    }
}
@media (min-width: 2133px) and (max-width: 2339px){
    .viewmoer{
        right: 287px;
    }
}
@media (max-width: 1750px){
    .viewmoer{
        right:-50px;
    }
}
@media (max-width: 1600px){
  .sortBox{
      width: 80%;
      margin: 0 55px;
  }
  .sortAll{
    font-size: 20px !important;
    padding: 15px 25px;
  }
  .sortItem{
    font-size: 20px !important;
    padding: 15px 25px;
  }
   .viewmoer{
        right:34px;
        font-size: 20px !important;
        padding: 15px 25px;
    }
}
</style>